import {FC} from 'react'
import './Study.scss'
import Heard from '../../compents/Heard/Heard.tsx'
import dayjs from 'dayjs'
import { Button, DatePicker, Form, message } from 'antd';

const { RangePicker } = DatePicker;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const rangeConfig = {
  rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
};

const onFinish = (fieldsValue: any) => {
  // Should format date value before submit.
  const rangeTimeValue = fieldsValue['range-time-picker'];
  const values = {
    ...fieldsValue,
  'range-time-picker': [
      rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
      rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
    ],
  };

  console.log('Received values of form: ', values);
  if(rangeTimeValue[0]){
    compare30Days(rangeTimeValue[0], rangeTimeValue[1]);
  }
};
const compare30Days = (start,end):boolean => {
  if(dayjs(start).add(30, 'day')<dayjs(end)){
    console.log('日期跨度大于30天了')
  }else{
    console.log('日期正确了哦')
  }

}
const Study: FC = () => {
  return (
      <div className={'Study'} >
        <Heard/>
        <Form
            name="time_related_controls"
            {...formItemLayout}
            onFinish={onFinish}
            style={{ maxWidth: 600 }}
        >
          <Form.Item name="range-time-picker" label="RangePicker[showTime]" {...rangeConfig}>
            <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
          </Form.Item>
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
  )
}
export default Study
